<template>
  <div class="container">
    <div class="count-down-times" v-if="endTime > 0">{{ endTime }}</div>
    <div class="currentTime">
      <div class="time">
        <span class="dateTime">{{ date }}</span>
        <span class="secondTime">{{ time }}</span>
      </div>
    </div>
    <el-row>
      <ApprovalServices />
      <BusinessManagement ref="business" />
    </el-row>
  </div>
</template>

<script>
import ApprovalServices from "./components/approval-services.vue"; // 青岛市审批服务大厅政务数据统计
import BusinessManagement from "./components/business-management.vue"; // 青岛市民中心业务办理数据统计
import moment from "moment";

export default {
  name: "index1",
  components: {
    ApprovalServices,
    BusinessManagement,
  },
  data() {
    return {
      date: moment().format("YYYY年MM月DD日"),
      time: moment().format("HH:mm:ss"),
      endTime: 0, //倒计时 时间
    };
  },
  created() {
    // 获取Promise对象的值
    // let jumpTmFun = this.GLOBAL.getJumpTime()
    // jumpTmFun.then(resData =>{
    //   if (resData.data > 0) {
    //     // 1.5分钟后跳转到index2大屏
    //     setTimeout(() => {
    //       this.$router.push({ path: '/index2' })
    //     }, 1000 * resData.data)
    //   }
    // })
  },
  mounted() {
    // 20分钟后跳转到index2大屏
    // setTimeout(() => {
    //   this.$router.push({ path: '/index2' })
    // }, 1000 * 60 * 1.5)
    this.dateTimeChange();
  },
  // 缓存进入此页面时执行的方法
  activated() {
    // 获取大厅接待情况数据
    // this.$refs.business.getDtjd()
    // 获取Promise对象的值
    let jumpTmFun = this.GLOBAL.getJumpTime();
    jumpTmFun.then((resData) => {
      this.endTime = resData.data;
      if (this.endTime > 0) {
        // 1.5分钟后跳转到index1大屏
        this.countDownTimes();
      }
    });
  },
  methods: {
    dateTimeChange() {
      var b = setInterval(() => {
        this.time = moment().format("HH:mm:ss");
        clearInterval(b);
        this.dateTimeChange();
      }, 1000);
    },
    // 倒计时
    countDownTimes() {
      var interval = setInterval(() => {
        this.endTime -= 1;
        if (this.endTime == -1) {
          this.endTime = 0;
          clearInterval(interval);
          //跳转页面
          this.$router.push({ path: "/index2" });
        }
      }, 1000);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  width: 4000px;
  height: 1200px;
  background: #050f3b;
  padding: 40px 35px;
  .currentTime {
    width: 4000px;
    position: absolute;
    margin: -15px auto 0;
    padding-right: 108px;
    box-sizing: border-box;
    left: 0;
    right: 0;
    text-align: center;
    .time {
      font-size: 40px;
      font-weight: 700;
      font-family: 微软雅黑;
      .dateTime {
        padding-right: 10px;
      }
      .secondTime {
        padding-left: 15px;
      }
    }
  }
}
</style>